<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>北京科技报</title>
		<link href="css/common.css" rel="stylesheet">
		<link href="css/header.css" rel="stylesheet">
		<link href="css/list.css" rel="stylesheet">
		<link href="css/bookstarp.css" rel="stylesheet">
		<link href="css/swiper.css" rel="stylesheet">
		<script src="js/swiper.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="vue_det">
			<div class="header-box">
				<div class="header flex align-end">
					<div class="flex-one">
						<img class="header-logo" src="images/logoff.png" />
						<div class="font-12 color-ff">聚焦科学传播 弘扬科学精神</div>
					</div>
					<div class="header-search-btn">
						<img class="header-search" src="images/search.png" />
					</div>
				</div>
				<div class="padding-lr-12 bg-ff" style="height: 43px;line-height: 43px;">
					<span class="font-12">当前位置：</span>
					<span class="font-12">首页</span>
					<span class="font-12">＞</span>
					<span class="font-12 color-main">热点解读</span>
				</div>
				<div class="flex align-center bg-ff padding-lr-12">
					<div class="header-xian flex-one"></div>
					<div class="header-radius"></div>
				</div>
			</div>
			<div class="box margin-top-120">
				<div id="container" class="container">
					<div class="swiper-box">
						<div id='swiper-container' class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide position-relative">
									<img class="swiper-img" src="images/app.png">
									<div class="swiper-content-box flex align-center">
										<div class="flex-one font-14 color-ff">中国发展高层论坛2024年年会：向世界发出“高水平开放”信号</div>
										<div class="font-12 color-ff margin-left-20">{{swiper_index}}/5</div>
									</div>
								</div>
								<div class="swiper-slide position-relative">
									<img class="swiper-img" src="images/footer1.png">
									<div class="swiper-content-box flex align-center">
										<div class="flex-one font-14 color-ff">中国发展高层论坛2024年年会：向世界发出“高水平开放”信号</div>
										<div class="font-12 color-ff margin-left-20">{{swiper_index}}/5</div>
									</div>
								</div>
								<div class="swiper-slide position-relative">
									<img class="swiper-img" src="images/footer5.png">
									<div class="swiper-content-box flex align-center">
										<div class="flex-one font-14 color-ff">中国发展高层论坛2024年年会：向世界发出“高水平开放”信号</div>
										<div class="font-12 color-ff margin-left-20">{{swiper_index}}/5</div>
									</div>
								</div>
								<!-- 更多 slide -->
							</div>
						</div>
					</div>
					<div class=" margin-top-14">
						<a href="">
							<div class="flex">
								<img class="content-left-img" src="images/app.png" />
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					
					<div class=" margin-top-14">
						<a href="">
							<div class="flex">
								<div class="position-relative margin-right-10" style="width: 35%;">
									<img class="content-left-img" style="width: 100%;" src="images/app.png" />
									<div class="content-live flex align-center justify-center">
										<img src="images/ing.png" style="width: 12px;height: 12px;" />
										<div class="color-ff font-11 margin-left-4">正在直播</div>
									</div>
								</div>
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					
					<div class=" margin-top-14">
						<a href="">
							<div class="flex">
								<img class="content-left-img" src="images/app.png" />
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”
									</div>
									<div class="font-12 text-cut-one margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10" style="color: #4EAAFF;">· 直播预告 2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					
					<div class=" margin-top-14">
						<a href="">
							<div class="flex">
								<div class="position-relative margin-right-10" style="width: 35%;">
									<img class="content-left-img" style="width: 100%;" src="images/app.png" />
									<div class="play-btn">
										<img src="images/play.png" alt="" />
									</div>
								</div>
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					
					<div class=" margin-top-14">
						<a href="">
							<div class="flex">
								<img class="content-left-img" src="images/app.png" />
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">
										<span class="list-span">专题</span> 
										2024年“世界地球日”系列活动之“自然资源科普小讲师”
									</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					
					
					<div class="margin-top-14">
						<div id='swiper-container-two'  class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<a href="">
										<img class="advert-img" src="images/app.png" alt="" />
									</a>
								</div>
								<div class="swiper-slide">
									<a href="">
										<img class="advert-img" src="images/app.png" alt="" />
									</a>
								</div>
								<!-- 更多 slide -->
							</div>
							<div  class="swiper-pagination"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="text-center font-14 margin-top-14" style="color: #9CA5AD;">{{isLoading?'加载中':'滑动加载更多'}}</div>
		</div>
		
	</body>
</html>

<script>
	var vm = new Vue({
		el: '#vue_det',
		data: {
			swiper_index:0,
			isLoading: false
		},
		mounted: function() {
			const that = this
			var mySwiper = new Swiper('#swiper-container', {
				speed: 600,
				centeredSlides: true,
				onSlideChangeStart: function(swiper){
					that.swiper_index = swiper.activeIndex +1
				},

			});
			var mySwiperTwo = new Swiper('#swiper-container-two', {
				speed: 600,
				loop: true,
				pagination: '.swiper-pagination',
				paginationClickable: true
			});
			this.swiper_index = mySwiper.activeIndex +1
			 window.addEventListener('scroll', () => {
			  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
			  if (clientHeight + scrollTop >= scrollHeight - 5 && !this.isLoading) { // 5是个阈值，控制距离底部时加载
				this.loadMore();
			  }
			});
		},
		methods: {
			loadMore: function() {
			  this.isLoading = true;
			  setTimeout(() => {
				  console.log(123)
				  // 获取容器元素
				  var container = document.getElementById("container");
				  // 创建一个新的div元素
				  var newDiv = document.createElement("div");
				  // 设置div的内容
				  newDiv.innerHTML = '<div class="margin-top-14"><a href=""><div class="flex"><img class="content-left-img" src="images/app.png" /><div class="flex-one flex flex-column justify-between"><div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”</div><div class="font-12 margin-bottom-4" style="color: #6A6B6B;"><span class="margin-right-10">2024/07/13</span><span>科普中央厨房123</span></div></div></div></a></div>';
					// 将新创建的div添加到容器的最后
					container.appendChild(newDiv);
				
				this.isLoading = false;
			  }, 500); // 模拟异步加载数据
			}
		}
	})
	
</script>